<template>
  <el-table :data= sendData.tableItemDataList border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
    <!--勾选框-->
    <el-table-column type="selection" width="55">
    </el-table-column>
    <!--索引-->
    <!-- <el-table-column prop="id" label="序号" width="55">
      <template slot-scope="scope">
        <span>{{ scope.row.id}}</span>
      </template>
    </el-table-column>-->
    <el-table-column v-for="(item, index) in sendData.tableItemList"  :key="item.key" :label="item.columnName" :prop="item.key" width="160" sortable>
    </el-table-column>
    <el-table-column v-for="inst in sendData.tableItemDataList" :key="inst.id" width="160" sortable>
      <template slot-scope="scope">
         <span>{{scope.row.inst}}</span>
      </template>
    </el-table-column>
    <!--<el-table-column label="编辑" width="100">
        <template slot-scope="scope">
            <router-link to="/ui/updateContent?contentId=scope.row.id">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            </router-link>
        </template>
    </el-table-column>
    <el-table-column label="删除" width="100">
        <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
    </el-table-column>-->
  </el-table>
</template>

<script>
  import Vue from 'vue'
   import Element from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import 'element-ui/lib/index.js'
  import Bus from './bus.js'
   Vue.use(Element)

  export default {
   name: 'dynamic-table',
    props: [
      'sendData',
    ],
   data: function (){
      return {
        //表格数据
        tableData: [
         ]
     }
    },
   methods: {
      refreshTable(){
              this.tableData = [
                               {"id":"1",
                                 "pic":"/asfd/asdf.jpg",
                                 "file":"/asfd/asdf.txt",
                                 "desc":"某某内容1"}
                               ]
            }
   },
   created(){

   },
   beforeDestroyed(){

   },
   mounted () {
      var self = this;
      Bus.$on('searchTable',function(params){
         console.log('接受到查询表单消息,发起后端查询:'+JSON.stringify(params));  // data-1232131232132131232
          this.tableData = []
          var result = [{"id":"1",
                                      "pic":"/asfd/asdf.jpg",
                                      "file":"/asfd/asdf.txt",
                                      "desc":"某某内容1"}
                                    ]
          for (let i = 0; i < result.length; i++) {
              this.tableData.push(result[i])
          }
          console.log(this.tableData)
          self.tableData = this.tableData //这里若是直接使用this，它指向的就不是Vue实例了，也就控制不了data里面的数据。
       });

   }
  }
</script>
